<template>
    <div id="category">
        <nav-bar class="nav-bar"><div slot="center">商品分类</div></nav-bar>
        <div class="content">
            <tab-menu :categories="categories"
                      @selectItem="selectItem"/>
            <scroll id="tab-content"
                    :data="[categoryData]"
                    ref="scroll">
                <div>
                    <tab-content-category :subcategories="showSubcategory"/>
                    <tab-control :titles="['流行', '新款', '精选']"
                                 @itemClick="tabClick"/>
                    <goods-list :goods="showCategoryDetail"/>
                </div>
            </scroll>
        </div>
    </div>
</template>

<script>
  import NavBar from '@/components/common/navbar/NavBar'

  import TabMenu from './childComps/TabMenu'
  import TabContentCategory from './childComps/TabContentCategory'


  import TabControl from '@/components/content/tabControl/TabControl'
  import Scroll from '@/components/common/scroll/Scroll'
  import GoodsList from '@/components/content/goods/GoodsList'

  import {getCategory, getSubcategory, getCategoryDetail} from "@/network/category";
  import {POP, SELL, NEW} from "@/common/const";
  import {tabControlMixin} from "@/common/mixin";

  export default {
    name: "Category",
    components: {
      NavBar,
      TabMenu,
      TabControl,
      Scroll,
      TabContentCategory,
      GoodsList
    },
    mixins: [tabControlMixin],
    data() {
      return {
        categories: [],
        categoryData: {},
        currentIndex: -1,
        currentType:'pop'
      }
    },
    created() {
      // 1.请求分类数据
      this._getCategory()

      // 2.监听图片加载完成
      // this.$bus.$on('imgLoad', () => {
      //   this.$refs.scroll.refresh()
      // })
    },
    computed: {
      showSubcategory() {
        if (this.currentIndex === -1) return {}
        return this.categoryData[this.currentIndex].subcategories
      },
      showCategoryDetail() {
        if (this.currentIndex === -1) return []
        return this.categoryData[this.currentIndex].categoryDetail[this.currentType]
      }
    },
    methods: {
      //事件监听相关的方法
      tabClick(index){
        switch (index){
            case 0:
              this.currentType = 'pop'
              break
            case 1:
              this.currentType = 'new'
              break
            case 2:
              this.currentType = 'sell'
              break
        }
      },
      _getCategory() {
        getCategory().then(res => {
          // 1.获取分类数据
          this.categories = res.data.category.list
          console.log(res);
          // 2.初始化每个类别的子数据
          for (let i = 0; i < this.categories.length; i++) {
            this.categoryData[i] = {
              subcategories: {},
              categoryDetail: {
                'pop': [],
                'new': [],
                'sell': []
              }
            }
          }
          // 3.请求第一个分类的数据
          this._getSubcategories(0)
        })
      },
      _getSubcategories(index) {
        this.currentIndex = index;
        const mailKey = this.categories[index].maitKey;
        getSubcategory(mailKey).then(res => {
          this.categoryData[index].subcategories = res.data
          this.categoryData = {...this.categoryData}
          this._getCategoryDetail(POP)
          this._getCategoryDetail(SELL)
          this._getCategoryDetail(NEW)
        })
      },
      _getCategoryDetail(type) {
        // 1.获取请求的miniWallkey
        const miniWallkey = this.categories[this.currentIndex].miniWallkey;
        // 2.发送请求,传入miniWallkey和type
        getCategoryDetail(miniWallkey, type).then(res => {
          // 3.将获取的数据保存下来
          this.categoryData[this.currentIndex].categoryDetail[type] = res
          this.categoryData = {...this.categoryData}
        })
      },
      /**
       * 事件响应相关的方法
       */
      selectItem(index) {
        this._getSubcategories(index)
      }
    }
  }
</script>

<style scoped>
    #category {
        height: 100vh;
    }

    .nav-bar {
        background-color: var(--color-tint);
        font-weight: 700;
        color: #fff;
    }

    .content {
        position: absolute;
        left: 0;
        right: 0;
        top: 44px;
        bottom: 49px;

        display: flex;
    }

    #tab-content {
        height: 100%;
        flex: 1;
    }
</style>
